<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>图片预览</title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<style>
			#box{
				width: 200px;
				height: auto;
				margin:150px auto 30px;
			}
			#imgshow{
				width: 100%;
				height: auto;
			}

			#pox{
				width: 200px;
				height: 24px;
				overflow: hidden;
				margin:0 auto;
			}
		</style>
	</head>
	<body>
	<div id="box">
		<img id="imgshow" src="" alt=""/>
	</div>
	<div id="pox">
		<input id="filed" type="file" accept="image/png,image/jpg,image/jpeg">
	</div>

		<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
		<script>
			//在input file内容改变的时候触发事件
			$('#filed').change(function(){
				//获取input file的files文件数组;
				//$('#filed')获取的是jQuery对象，.get(0)转为原生对象;
//                var file = $('#filed').get(0).files[0];使用this而不是$(this)是因为file对象是js原生对象，而不是jquery对象
				//这边默认只能选一个，但是存放形式仍然是数组，所以取第一个元素使用[0];
                var file = this.files[0];
                var size = file.size;
                var type = file.type;
                var name = file.name;
//                console.log(file);
                alert('文件尺寸：'+size+",文件类型："+type+",文件名称："+name);

				//创建用来读取此文件的对象
				var reader = new FileReader();

//				//使用该对象读取file文件
				reader.readAsDataURL(file);

//				//读取文件成功后执行的方法函数
				reader.onload=function(e){
//					//读取成功后返回的一个参数e，整个的一个进度事件
//					console.log(e);
//					//选择所要显示图片的img，要赋值给img的src就是e中target下result里面
//					//的base64编码格式的地址
					$('#imgshow').attr('src',e.target.result);
				}
			})
		</script>
	</body>
</html>
